<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>employee的相关数据显示（分页）</title>
    <!-- 引入CSS文件 -->
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}">
</head>
<body>
<div class="layui-container">
    <!--    一些小提示-->
    <blockquote class="layui-elem-quote" style="margin-top: 30px;">
        <div class="layui-text">
            <ul>
                <li>1.查询员工信息：/emp/————————get</li>
                <li>2.根据id查询员工信息：/emp/id————————get</li>
                <li>3.跳转到添加员工页面：/emp/add————————get</li>
                <li>4.添加员工信息：/emp/add————————post</li>
                <li>5.修改员工信息：/emp/update————————post</li>
                <li>6.删除员工信息：/emp/delete————————delete</li>
            </ul>
        </div>
    </blockquote>

    <!--    布局内容-->
    <div class="layui-btn-container" id="app">
        <!--        列表-->
        <table class="layui-table">
            <button type="button" class="layui-btn layui-btn-fluid">
                <a th:href="@{/to/add}">点击添加员工信息</a>
            </button>

            <colgroup>
                <col width="150">
                <col width="200">
                <col>
            </colgroup>
            <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>邮箱</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="employee:${empPageInfo.list}">
                <td th:text="${employee.empId}">余小小</td>
                <td th:text="${employee.empName}">余小小</td>
                <td th:text="${employee.age}">余小小</td>
                <td th:text="${employee.sex}">余小小</td>
                <td th:text="${employee.email}">余小小</td>

                <td>
                    <a @click="deleteEmployee()" th:href="@{'/restful/employee/'+${employee.empId}}">删除</a>
                    <!--                    需要先传入当前id，得到dao中的对象-->
                    <a th:href="@{'/restful/employee/'+${employee.empId}}">更新</a>
                </td>
            </tr>
            </tbody>
        </table>



        <form method="post">
            <!--        发送delete请求 -->
            <input type="hidden" name="_method" value="delete">
        </form>
    </div>

    <!--        自定义分页实现-->
    <div style="text-align: center">
        <a th:if="${empPageInfo.hasPreviousPage}" th:href="@{/emp/page/1}">首页</a>
        <a th:if="${empPageInfo.hasPreviousPage}" th:href="@{'/emp/page/'+${empPageInfo.prePage}}">上一页</a>
        <span th:each="num : ${empPageInfo.navigatepageNums}">
                <a th:if="${empPageInfo.pageNum==num}" th:href="@{'/emp/page/'+${num}}" th:text="'['+${num}+']'"
                   style="color:red;"></a>
                <a th:if="${empPageInfo.pageNum!=num}" th:href="@{'/emp/page/'+${num}}" th:text="${num} "></a>
            </span>
        <a th:if="${empPageInfo.hasNextPage}" th:href="@{'/emp/page/'+${empPageInfo.nextPage}}">下一页</a>
        <a th:if="${empPageInfo.hasNextPage}" th:href="@{'/emp/page/'+${empPageInfo.pages}}">末页</a>
    </div>


</div>
<!-- 引入JS文件 -->
<script th:src="@{/static/layui/layui.js}"></script>
<script th:src="@{/static/vue/vue.js}"></script>
<script>
    layui.use(function () {
        var laypage = layui.laypage;
        // 自定义主题
        laypage.render({
            elem: 'demo-laypage-theme-1',
            count: 100,
            theme: '#1E9FFF'
        });
        laypage.render({
            elem: 'demo-laypage-theme-2',
            count: 100,
            theme: '#FF5722'
        });
        laypage.render({
            elem: 'demo-laypage-theme-3',
            count: 100,
            theme: '#FFB800'
        });
    });
</script>

</body>
</html>